import React from 'react';
import { Link } from 'react-router-dom';
import { CheckCircle, Clipboard, BarChart, Clock, Users, Award, Zap, AlertTriangle } from 'lucide-react';
export function Methodology() {
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative py-24 bg-carbon-black">
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Mountain testing environment" className="w-full h-full object-cover opacity-30" />
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl">
            <h1 className="font-display text-4xl md:text-6xl mb-6">
              OUR TESTING METHODOLOGY
            </h1>
            <p className="text-xl text-gray-300">
              At OpenGo Hub, we believe that the only way to truly evaluate
              outdoor gear is through extensive field testing in the
              environments where it's designed to be used. Here's how we put
              gear to the test.
            </p>
          </div>
        </div>
      </section>
      {/* Core Principles */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl text-center mb-12">
            CORE TESTING PRINCIPLES
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Principle 1 */}
            <div className="bg-carbon-black p-8 rounded-lg">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-outdoor-orange mb-6">
                <CheckCircle size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">REAL-WORLD TESTING</h3>
              <p className="text-gray-300">
                We never rely solely on lab tests or manufacturer
                specifications. Every piece of gear undergoes extensive field
                testing in the environments it's designed for, from alpine peaks
                to desert canyons.
              </p>
            </div>
            {/* Principle 2 */}
            <div className="bg-carbon-black p-8 rounded-lg">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-outdoor-orange mb-6">
                <Clipboard size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">
                STANDARDIZED PROTOCOLS
              </h3>
              <p className="text-gray-300">
                While our testing environments vary, we follow standardized
                protocols for each gear category to ensure consistent evaluation
                across products, allowing for meaningful comparisons.
              </p>
            </div>
            {/* Principle 3 */}
            <div className="bg-carbon-black p-8 rounded-lg">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-outdoor-orange mb-6">
                <BarChart size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">QUANTIFIABLE DATA</h3>
              <p className="text-gray-300">
                We combine subjective experience with objective measurements
                whenever possible, using specialized equipment to gather
                quantifiable data on performance metrics.
              </p>
            </div>
            {/* Principle 4 */}
            <div className="bg-carbon-black p-8 rounded-lg">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-outdoor-orange mb-6">
                <Clock size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">
                LONG-TERM DURABILITY
              </h3>
              <p className="text-gray-300">
                We don't just test gear for a weekend. Many of our reviews
                involve months or even years of use to evaluate how products
                hold up over time and through changing seasons.
              </p>
            </div>
            {/* Principle 5 */}
            <div className="bg-carbon-black p-8 rounded-lg">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-outdoor-orange mb-6">
                <Users size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">MULTIPLE TESTERS</h3>
              <p className="text-gray-300">
                To account for different body types, experience levels, and
                preferences, we have multiple testers evaluate the same product
                whenever possible, especially for subjective categories like
                comfort.
              </p>
            </div>
            {/* Principle 6 */}
            <div className="bg-carbon-black p-8 rounded-lg">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-outdoor-orange mb-6">
                <Award size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">CATEGORY EXPERTISE</h3>
              <p className="text-gray-300">
                Our testers are specialists in their gear categories, bringing
                years of experience and deep knowledge to their evaluations. We
                don't have generalists reviewing specialized equipment.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Testing Process */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl text-center mb-12">
            OUR TESTING PROCESS
          </h2>
          <div className="max-w-4xl mx-auto">
            <div className="relative">
              {/* Timeline line */}
              <div className="absolute left-0 md:left-1/2 transform md:-translate-x-1/2 top-0 bottom-0 w-1 bg-outdoor-orange"></div>
              {/* Step 1 */}
              <div className="relative mb-16">
                <div className="md:flex items-center">
                  <div className="md:w-1/2 pr-8 md:text-right hidden md:block">
                    <h3 className="font-display text-2xl mb-2">
                      RESEARCH & SELECTION
                    </h3>
                    <p className="text-gray-300">
                      We identify the most promising and popular products in
                      each category through market research and community input.
                    </p>
                  </div>
                  <div className="absolute left-0 md:left-1/2 transform -translate-y-1/2 md:-translate-x-1/2 bg-earth-dark border-4 border-outdoor-orange rounded-full h-12 w-12 flex items-center justify-center">
                    <span className="text-outdoor-orange font-bold">1</span>
                  </div>
                  <div className="pl-16 md:pl-8 md:w-1/2 md:hidden">
                    <h3 className="font-display text-2xl mb-2">
                      RESEARCH & SELECTION
                    </h3>
                    <p className="text-gray-300">
                      We identify the most promising and popular products in
                      each category through market research and community input.
                    </p>
                  </div>
                </div>
              </div>
              {/* Step 2 */}
              <div className="relative mb-16">
                <div className="md:flex items-center">
                  <div className="md:w-1/2 pr-8 md:text-right md:hidden">
                    <h3 className="font-display text-2xl mb-2">
                      PROTOCOL DEVELOPMENT
                    </h3>
                    <p className="text-gray-300">
                      Our team creates a standardized testing protocol specific
                      to each gear category, focusing on key performance
                      metrics.
                    </p>
                  </div>
                  <div className="absolute left-0 md:left-1/2 transform -translate-y-1/2 md:-translate-x-1/2 bg-earth-dark border-4 border-outdoor-orange rounded-full h-12 w-12 flex items-center justify-center">
                    <span className="text-outdoor-orange font-bold">2</span>
                  </div>
                  <div className="pl-16 md:pl-8 md:w-1/2">
                    <h3 className="font-display text-2xl mb-2">
                      PROTOCOL DEVELOPMENT
                    </h3>
                    <p className="text-gray-300">
                      Our team creates a standardized testing protocol specific
                      to each gear category, focusing on key performance
                      metrics.
                    </p>
                  </div>
                </div>
              </div>
              {/* Step 3 */}
              <div className="relative mb-16">
                <div className="md:flex items-center">
                  <div className="md:w-1/2 pr-8 md:text-right">
                    <h3 className="font-display text-2xl mb-2">
                      FIELD TESTING
                    </h3>
                    <p className="text-gray-300">
                      Products are distributed to our testing team who use them
                      extensively in real-world conditions, documenting
                      performance data and experiences.
                    </p>
                  </div>
                  <div className="absolute left-0 md:left-1/2 transform -translate-y-1/2 md:-translate-x-1/2 bg-earth-dark border-4 border-outdoor-orange rounded-full h-12 w-12 flex items-center justify-center">
                    <span className="text-outdoor-orange font-bold">3</span>
                  </div>
                  <div className="pl-16 md:pl-8 md:w-1/2 md:hidden">
                    <h3 className="font-display text-2xl mb-2">
                      FIELD TESTING
                    </h3>
                    <p className="text-gray-300">
                      Products are distributed to our testing team who use them
                      extensively in real-world conditions, documenting
                      performance data and experiences.
                    </p>
                  </div>
                </div>
              </div>
              {/* Step 4 */}
              <div className="relative mb-16">
                <div className="md:flex items-center">
                  <div className="md:w-1/2 pr-8 md:text-right md:hidden">
                    <h3 className="font-display text-2xl mb-2">
                      ANALYSIS & COMPARISON
                    </h3>
                    <p className="text-gray-300">
                      Test results are compiled, analyzed, and compared to
                      establish relative performance rankings within each
                      category.
                    </p>
                  </div>
                  <div className="absolute left-0 md:left-1/2 transform -translate-y-1/2 md:-translate-x-1/2 bg-earth-dark border-4 border-outdoor-orange rounded-full h-12 w-12 flex items-center justify-center">
                    <span className="text-outdoor-orange font-bold">4</span>
                  </div>
                  <div className="pl-16 md:pl-8 md:w-1/2">
                    <h3 className="font-display text-2xl mb-2">
                      ANALYSIS & COMPARISON
                    </h3>
                    <p className="text-gray-300">
                      Test results are compiled, analyzed, and compared to
                      establish relative performance rankings within each
                      category.
                    </p>
                  </div>
                </div>
              </div>
              {/* Step 5 */}
              <div className="relative">
                <div className="md:flex items-center">
                  <div className="md:w-1/2 pr-8 md:text-right">
                    <h3 className="font-display text-2xl mb-2">
                      PUBLICATION & UPDATES
                    </h3>
                    <p className="text-gray-300">
                      Final reviews are published with detailed findings, but
                      testing continues for long-term durability assessment and
                      updates.
                    </p>
                  </div>
                  <div className="absolute left-0 md:left-1/2 transform -translate-y-1/2 md:-translate-x-1/2 bg-earth-dark border-4 border-outdoor-orange rounded-full h-12 w-12 flex items-center justify-center">
                    <span className="text-outdoor-orange font-bold">5</span>
                  </div>
                  <div className="pl-16 md:pl-8 md:w-1/2 md:hidden">
                    <h3 className="font-display text-2xl mb-2">
                      PUBLICATION & UPDATES
                    </h3>
                    <p className="text-gray-300">
                      Final reviews are published with detailed findings, but
                      testing continues for long-term durability assessment and
                      updates.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Rating System */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl text-center mb-12">
            OUR RATING SYSTEM
          </h2>
          <div className="max-w-4xl mx-auto">
            <p className="text-xl text-gray-300 text-center mb-12">
              We evaluate gear across multiple performance categories, each
              weighted according to its importance for the specific gear type.
              Our 5-star rating system provides a quick reference while our
              detailed reviews offer comprehensive insights.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div>
                <h3 className="font-display text-2xl mb-6">
                  PERFORMANCE CATEGORIES
                </h3>
                <div className="space-y-6">
                  <div>
                    <h4 className="font-bold mb-2 flex items-center">
                      <Zap size={18} className="text-outdoor-orange mr-2" />
                      PERFORMANCE
                    </h4>
                    <p className="text-gray-300">
                      How well the product performs its primary function under
                      optimal conditions.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2 flex items-center">
                      <Clock size={18} className="text-outdoor-orange mr-2" />
                      DURABILITY
                    </h4>
                    <p className="text-gray-300">
                      How well the product withstands repeated use and adverse
                      conditions over time.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2 flex items-center">
                      <Users size={18} className="text-outdoor-orange mr-2" />
                      COMFORT & ERGONOMICS
                    </h4>
                    <p className="text-gray-300">
                      How comfortable and user-friendly the product is during
                      extended use.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2 flex items-center">
                      <AlertTriangle size={18} className="text-outdoor-orange mr-2" />
                      VERSATILITY
                    </h4>
                    <p className="text-gray-300">
                      How well the product performs across different activities
                      and conditions.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2 flex items-center">
                      <BarChart size={18} className="text-outdoor-orange mr-2" />
                      VALUE
                    </h4>
                    <p className="text-gray-300">
                      The overall value proposition considering performance
                      relative to price.
                    </p>
                  </div>
                </div>
              </div>
              <div>
                <h3 className="font-display text-2xl mb-6">
                  STAR RATING EXPLAINED
                </h3>
                <div className="space-y-6">
                  <div>
                    <div className="flex items-center mb-2">
                      <span className="text-outdoor-orange font-display mr-2">
                        ★★★★★
                      </span>
                      <span className="font-bold">EXCEPTIONAL (5.0)</span>
                    </div>
                    <p className="text-gray-300">
                      Sets a new standard in its category. Nearly flawless
                      performance that exceeds expectations in all conditions.
                    </p>
                  </div>
                  <div>
                    <div className="flex items-center mb-2">
                      <span className="text-outdoor-orange font-display mr-2">
                        ★★★★☆
                      </span>
                      <span className="font-bold">EXCELLENT (4.0-4.9)</span>
                    </div>
                    <p className="text-gray-300">
                      Outstanding performance with minor flaws that don't
                      significantly impact functionality or user experience.
                    </p>
                  </div>
                  <div>
                    <div className="flex items-center mb-2">
                      <span className="text-outdoor-orange font-display mr-2">
                        ★★★☆☆
                      </span>
                      <span className="font-bold">GOOD (3.0-3.9)</span>
                    </div>
                    <p className="text-gray-300">
                      Solid performance that meets expectations but with
                      noticeable limitations or drawbacks.
                    </p>
                  </div>
                  <div>
                    <div className="flex items-center mb-2">
                      <span className="text-outdoor-orange font-display mr-2">
                        ★★☆☆☆
                      </span>
                      <span className="font-bold">FAIR (2.0-2.9)</span>
                    </div>
                    <p className="text-gray-300">
                      Functional but with significant limitations that impact
                      performance or durability.
                    </p>
                  </div>
                  <div>
                    <div className="flex items-center mb-2">
                      <span className="text-outdoor-orange font-display mr-2">
                        ★☆☆☆☆
                      </span>
                      <span className="font-bold">POOR (1.0-1.9)</span>
                    </div>
                    <p className="text-gray-300">
                      Major flaws that significantly compromise the product's
                      intended function or safety.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Ethics & Transparency */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <h2 className="font-display text-3xl md:text-4xl text-center mb-6">
              ETHICS & TRANSPARENCY
            </h2>
            <p className="text-xl text-gray-300 mb-8">
              We believe that honest, unbiased reviews are only possible with
              strict ethical standards and full transparency about our testing
              process.
            </p>
            <div className="space-y-6">
              <div className="bg-earth-dark p-6 rounded-lg">
                <h3 className="font-bold text-xl mb-2">No Paid Reviews</h3>
                <p className="text-gray-300">
                  We never accept payment for positive reviews or ratings. Our
                  opinions are based solely on our testing results and are not
                  influenced by manufacturers or advertisers.
                </p>
              </div>
              <div className="bg-earth-dark p-6 rounded-lg">
                <h3 className="font-bold text-xl mb-2">Affiliate Disclosure</h3>
                <p className="text-gray-300">
                  We use affiliate links that may generate a commission when you
                  make a purchase. However, these potential earnings never
                  influence our ratings or recommendations.
                </p>
              </div>
              <div className="bg-earth-dark p-6 rounded-lg">
                <h3 className="font-bold text-xl mb-2">Product Acquisition</h3>
                <p className="text-gray-300">
                  We obtain gear through a mix of purchases, manufacturer
                  samples, and long-term loans. When we receive free products,
                  we clearly disclose this in our reviews, but it never affects
                  our evaluation.
                </p>
              </div>
              <div className="bg-earth-dark p-6 rounded-lg">
                <h3 className="font-bold text-xl mb-2">Testing Transparency</h3>
                <p className="text-gray-300">
                  We provide detailed information about our testing conditions,
                  duration, and methodology so readers can understand the
                  context of our evaluations and make informed decisions.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Call to Action */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="font-display text-3xl md:text-4xl mb-6">
              JOIN OUR TESTING PROGRAM
            </h2>
            <p className="text-xl text-gray-300 mb-8">
              Are you an experienced outdoor enthusiast interested in
              contributing to our gear testing program? We're always looking for
              dedicated testers with specialized expertise.
            </p>
            <Link to="/contact" className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 rounded transition-colors">
              APPLY TO BECOME A TESTER
            </Link>
          </div>
        </div>
      </section>
    </div>;
}